<template>
  <el-form
    label-width="170px"
    :model="formValue"
    :rules="rules"
    label-position="right"
    ref="fromdata"
  >
    <template v-for="(item,key) in configOption.dictKey">
      <el-row :key="uuidList[key]">
        <el-form-item
          :label="configOption.title[key]"
          :prop="'dictValue'+key"
        >
          <el-input
            v-if="configOption.formItemType[key]=='input'"
            v-model="formValue['' + ('dictValue'+key) + '']"
            style="width: 220px"
            clearable
            placeholder="请输入"
          >
            <template
              slot="append"
              v-if="configOption.unit[key]"
            >{{configOption.unit[key]}}</template>
          </el-input>
          <el-select
            clearable
            v-if="configOption.formItemType[key]=='select'"
            v-model="formValue['' + ('dictValue'+key) + '']"
            placeholder="请选择"
          >
            <template v-for="(item, index) in selectOptionsData[key]">
              <el-option
                v-if="item.workUserType==1"
                :key="index"
                :value="item.id"
                :label="item.value"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>

      </el-row>
      <el-row class="showMessage" :key="uuidList[key]+1">{{configOption.subTitle[key]}}</el-row>
    </template>

    <el-row>
      <el-col
        :span="24"
        align="right"
      >
        <el-button
          type="primary"
          @click="onSubmit"
        >保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { dictSetValueByKey } from "@/api/after-sale/dictionary";
import { getStoreId, getServerDict, uuid } from "@/utils/index";
export default {
  components: {},
  name: "DialogDataForm",
  props: {
    //传入配置项
    option: {
      type: Object,
      default: () => { return {} }
    },
  },
  data () {
    return {
      configOption: {},//配置项
      formValue: {},
      selectOptionsData: [],//下拉框数据
      uuidList: [],//dom key
      rules: {},
    };
  },
  watch: {
    option: {
      deep: true,
      handler (nv, ov) {
        this.configOption = nv;
        this.SetDefatultData();
      }
    }
  },
  async created () {
    this.configOption = this.option;
    this.SetDefatultData();
  },
  methods: {
    getDictData () {
      let { dictKey = [] } = this.configOption;
      dictKey.map(async (item, index) => {
        let data = await getServerDict(item);
        this.$set(this.formValue, '' + ('dictValue' + index) + '', Number(data[0].dictValue))
      })
    },
    setRules () {
      let { dictKey = [], formItemType = [] } = this.configOption;
      dictKey.map((item, index) => {
        let key = '' + ('dictValue' + index) + '';
        this.rules[key] = {
          required: true,
          message: formItemType[index] == 'select' ? '请选择' : '请输入',
          trigger: "blur",
        };
      })

    },
    async SetDefatultData () {
      let { defatultData = [] } = this.configOption;
      this.setRules();
      defatultData.map(async (item, index) => {
        this.uuidList[index] = uuid();
        this.$set(this.formValue, '' + ('dictValue' + index) + '', item)
        if (typeof item === 'function' && this.configOption.formItemType[index] == 'select') {
          this.$set(this.formValue, '' + ('dictValue' + index) + '', '')
          this.$set(this.selectOptionsData, index, await item())
        }
      })
      this.getDictData();
    },
    onSubmit () {
      this.$refs["fromdata"].validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          return false;
        }
      });
    },
    async saveData () {
      let { dictKey = [] } = this.configOption;
      let successArry = [];
      dictKey.map(async (item, index) => {
        const { success } = await dictSetValueByKey(item, this.formValue['' + ('dictValue' + index) + '']);
        successArry.push(success);
      })

      if (!successArry.includes(false)) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        this.$emit("close", true);
      } else {
        this.$message.error("操作失败，请联系系统管理员");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.showMessage{
  margin-top: -10px;
  padding-bottom: 20px;
}
</style>
